<template>
	<view class="tabWp" :style="{width:width+'rpx'}">
		<view class="tabItem" v-for="(item,i) in list" :key="i" @click="handleTabItem(item,i)"
			:class="activityIndex==i?'activityItem':''">
			<view class="title">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityIndex: 0
			};
		},
		props: {
			list: {
				type: Array,
				required: true
			},
			width: {
				type: Number,
				default: 600

			}
		},
		methods: {
			handleTabItem(item, i) {
				this.activityIndex = i
				this.$emit('handleTabItem', i)
			}
		}
	}
</script>

<style lang="scss">
	.tabWp {
		margin: 0 auto;
		box-sizing: border-box;
		padding: 0 40upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 9px 1px rgba(92, 87, 254, 0.2);
		border-radius: 20upx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;

		.tabItem {
			flex: 1;
			text-align: center;
			margin: 14upx 0;
			border-radius: 20upx;

			.title {
				font-size: 30upx;
				font-weight: 400;
				padding: 22upx;
			}
		}

		.activityItem {
			background-color: #423BFE;
			color: #FFFFFF;
		}
	}
</style>
